import 'todomvc-app-css/index.css' 

import Vue from 'vue'


Vue.config.productionTip = false

var filters = {
  all(todos) {
    return todos
  },
  active(todos){
    return todos.filter((todo) => {
      return !todo.completed
    })
  }, 
  completed(todos) {
    return todos.filter((todo) => {
      return todo.completed
    })
  },
}

let app = new Vue({
  el:".todoapp",
  data:{
    msg:'hello',
    title:'todosmvc',
    test: 2 ,
    newTodo:'',
    newTodo2:'vue公开课2',
    todos:[
      {content:"ajax",completed:false},
      {content:"ajax2",completed: false}
    ],
    editedTodo:null,
    hashName:'all'
  },
  computed:{
    remain(){
      return filters.active(this.todos).length
    },
    isAll:{
      get(){
        return this.remain === 0
      },
      set(value){
        this.todos.forEach((todo)=>{
          todo.completed = value
        })

      }
    },
    filteredTodos(){
      return filters[this.hashName](this.todos)
    }
  },
  methods:{
    addTodo(e) {
      if (!this.newTodo){
        alert("请输入值")
        return
      }
        this.todos.push({
          "content": this.newTodo,
          "completed": false
        })
        this.newTodo = ''
     
    },
    deleteTodo(index){
      this.todos.splice(index,1);
    },
    editTodo(todo) {
      this.editCache = todo.content
      this.editedTodo = todo
    },
    doneEdit(todo,index){
      this.editedTodo = null //编辑过了
      if(!todo.content){
        this.deleteTodo(index)
      }

    },
    cancleEdit(todo){
      this.editedTodo = null
      todo.content = this.editCache
    },
    clear(){
      this.todos = filters.active(this.todos)
    }

  },
  directives: { //自定义指令
    focus(el, value) {
      if (value) {
        el.focus()
      }
    }
  }
});

function hashChange(){
  let hashName = location.hash.replace(/#\/?/,'')
  if(filters[hashName]){
    app.hashName = hashName //因为外部引用实例vue
  }else{
    location.hash = ''
    app.hashName = 'all' //因为外部引用实例vue，所以app
  }

}
// 全局监听：
window.addEventListener('hashchange',hashChange)

// import Vue from 'vue'
// import App from './App'

// Vue.config.productionTip = false
// new Vue({
//   el: '#app',
//   components: { App },
//   template: '<App/>'
// })
